<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>MAGNUS Technologies</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<link rel="stylesheet" href="../static/jquery/jquery.mobile-1.1.0.css" />

<script type="text/javascript" src="../static/jquery/jquery.js"></script>
<script type="text/javascript" src="../static/jquery/jquery.mobile-1.1.0.js"></script>
<!-- Charts -->
<script type="text/javascript" src="../static/FSCharts/FusionCharts.js"></script>
<script type="text/javascript" src="../static/gchart/jquery.gchart.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript">
$(document).ready(function() {
	var dataXml = "<graph yaxisname='' hovercapbg='FFFFFF' divLineColor='999999' divLineAlpha='80'  decimalPrecision='0' showValues='0' showLegend='0'>"
					+ "<categories>"
						+ "<category name='Category1'/>"
						+ "<category name='Category2'/>"
						+ "<category name='Category3'/>"
					+ "</categories>"
					+ "<dataset seriesname='Closing Bal.' color='839F2F'>"
						+ "<set value='1000'/>"
						+ "<set value='2000'/>"
						+ "<set value='3000'/>"
					+ "</dataset>"
					+ "<dataset seriesname='Provisional Bal.' color='56B9F9'>"
						+ "<set value='4000'/>"
						+ "<set value='5000'/>"
						+ "<set value='6000'/>"
					+ "</dataset>"
				+ "</graph>";

	FusionCharts.setCurrentRenderer('javascript');
	var myChart = new FusionCharts("../static/FSCharts/MSColumn3D.swf", "myChartId", 300, 200,"0","1");
	myChart.setDataXML(dataXml);
	myChart.setTransparent();
	myChart.render(document.getElementById('basicGChart'));
	
	var chartObj = new FusionCharts({
        swfUrl: "../static/FSCharts/Bar2D.swf",
        width: "400", height: "500",
        id: 'sampleChart',
        dataSource: "./data3.xml",
        dataFormat: FusionChartsDataFormats.XMLURL,           
        renderAt: 'basicGChart2'
     }).render();
	
	var chartObj2 = new FusionCharts({
        swfUrl: "../static/FSCharts/MSStackedColumn2D.swf",
        width: "400", height: "500",
        id: 'sampleChart2',
        dataSource: "./data4.xml",
        dataFormat: FusionChartsDataFormats.XMLURL,           
        renderAt: 'basicGChart3'
     }).render();
	
	var chartObj3 = new FusionCharts({
        swfUrl: "../static/FSCharts/Pie3D.swf",
        width: "400", height: "500",
        id: 'sampleChart3',
        dataSource: "./data5.xml",
        dataFormat: FusionChartsDataFormats.XMLURL,           
        renderAt: 'basicGChart4'
     }).render();
	
	var chartObj4 = new FusionCharts({
        swfUrl: "../static/FSCharts/HLinearGauge.swf",
        width: "400", height: "80",
        id: 'sampleChart4',
        dataSource: "./data6.xml",
        dataFormat: FusionChartsDataFormats.XMLURL,           
        renderAt: 'basicGChart5'
     }).render();
	
	$('#basicGChart6').gchart({
		type: 'line', 
		maxValue: 40,
		title: 'Weather for|Brisbane, Australia',
		titleColor: 'green',
		backgroundColor: $.gchart.gradient('horizontal', 'ccffff', 'ccffff00'),
		series: [
		        $.gchart.series('Max', [29.1, 28.9, 28.1, 26.3, 23.5, 21.2, 20.6, 21.7, 23.8, 25.6, 27.3, 28.6], 'red', 'ffcccc'),
				$.gchart.series('Min', [20.9, 20.8, 19.5, 16.9, 13.8, 10.9, 9.5, 10.0, 12.5, 15.6, 18.0, 19.8], 'green'),
				$.gchart.series('Rainfall', [157.7, 174.6, 138.5, 90.4, 98.8, 71.2, 62.6, 42.7, 34.9, 94.4, 96.5, 126.2], 'blue', 0, 200)
			],
		axes: [
		        $.gchart.axis('bottom', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 'black'),
				$.gchart.axis('left', 0, 40, 'red', 'right'),
				$.gchart.axis('left', ['C'], [50], 'red', 'right'),
				$.gchart.axis('right', 0, 200, 50, 'blue', 'left'),
				$.gchart.axis('right', ['mm'], [50], 'blue', 'left')
			],
		legend: 'right',
		height: 500,
		weidth: 400
	});
	
});
</script>
<script type="text/javascript">
	//Load the Visualization API and the piechart package.
	google.load('visualization', '1.0', {'packages':['corechart']});
	
	// Set a callback to run when the Google Visualization API is loaded.
	google.setOnLoadCallback(drawChart);
	
	// Callback that creates and populates a data table,
	// instantiates the pie chart, passes in the data and
	// draws it.
	function drawChart() {
	
	  // Create the data table.
	  var data = new google.visualization.DataTable();
	  data.addColumn('string', 'Topping');
	  data.addColumn('number', 'Slices');
	  data.addRows([
	    ['Mushrooms', 3],
	    ['Onions', 1],
	    ['Olives', 1],
	    ['Zucchini', 1],
	    ['Pepperoni', 2]
	  ]);
	
	  // Set chart options
	  var options = {'title':'How Much Pizza I Ate Last Night',
	                 'width':400,
	                 'height':500};
	
	  // Instantiate and draw our chart, passing in some options.
	  var chart = new google.visualization.PieChart(document.getElementById('basicGChart7'));
	  chart.draw(data, options);
	}
</script>
</head>
	<body>
		<div data-role="page">
            <div data-theme="b" data-role="header" data-position="fixed">
                <a data-role="button" data-inline="true" data-transition="fade" data-theme="c" href="add.html" data-icon="plus" data-iconpos="left">
                    Add
                </a>
                <a data-role="button" data-inline="true" data-transition="fade" data-theme="c" href="logout.action" data-icon="gear" data-iconpos="left">
                    Logout
                </a>
                <h3>AEM</h3>
            </div>
            
            <div data-role="content">
				<ul>
					<li>
						<div id="basicGChart"></div>
					</li>
					<li>
						<div id="basicGChart2"></div>
					</li>
					<li>
						<div id="basicGChart3"></div>
					</li>
					<li>
						<div id="basicGChart4"></div>
					</li>
					<li>
						<div id="basicGChart5"></div>
					</li>
					<li>
						<div id="basicGChart6"></div>
					</li>
					<li>
						<div id="basicGChart7"></div>
					</li>
				</ul>
			</div>

            <div data-theme="b" data-role="footer" data-position="fixed">
                <div data-role="navbar" data-iconpos="top">
                    <ul>
                        <li><a href="home.html" data-transition="slide" data-icon="home">Home</a></li>
                        <li><a href="#" data-icon="grid" class="ui-btn-active">Report</a></li>
                    </ul>
                </div>
            </div>
        </div>
	</body>
</html>